<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:yh="http://www.thymeleaf.org">
<head th:fragment="resources(title,keywords)">
	<meta charset="utf-8">
	<title th:text="${title}"></title>
	<meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="keywords" th:content="${keywords ?: commons.site_option('site_keywords')}"/>
    <meta name="description" th:content="${description ?:commons.site_option('site_description')}"/>
    
	<link rel="shortcut icon" th:href="@{/user/img/favicon.ico}"/> 
    
	<link th:href="@{/yqq/css/base.css}" rel="stylesheet">
	<link th:href="@{/yqq/css/m.css}" rel="stylesheet">
	
	<link th:href="@{//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.css}" rel="stylesheet"/>
    
	<script th:src="@{/yqq/js/jquery-1.8.3.min.js}" ></script>
	<script th:src="@{/yqq/js/comm.js}"></script>
	
	<script th:src="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.js}"></script>
	<script th:src="@{/admin/js/base.js}"></script>
	
	<link href="https://cdn.bootcss.com/select2/4.0.10/css/select2.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/select2/4.0.10/js/select2.min.js"></script>
    
	<!--[if lt IE 9]>
	<script src="@{/yqq/js/modernizr.js}"></script>
	<![endif]-->
	
	<style type="text/css">
	
	.select2-container {
		width: 50% !important;
	}
	
	.select2-container--default .select2-selection--multiple {
		border: 0px !important;
		border-right: 1px solid #aaa !important;
		border-radius: 0px;
	}
	</style>
	
	<script type="text/javascript">
	function randomNum(minNum,maxNum){ 
	    switch(arguments.length){ 
	        case 1: 
	            return parseInt(Math.random()*minNum+1,10); 
	        break; 
	        case 2: 
	            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
	        break; 
	            default: 
	                return 0; 
	            break; 
	    } 
	}
	
// 	document.addEventListener("error", function (e) {
// 		var elem = e.target;
// 		if (elem.tagName.toLowerCase() == 'img') {
// // 			var radom = randomNum(1,4);
// // 			var imgSrc = "/yqq/images/a01.jpg";
// // 			if(radom%2==0) {
// // 				imgSrc = "/yqq/images/"+radom+".jpg";
// // 			}else {
// // 				imgSrc = "/yqq/images/b0"+randomNum(1, 5)+".jpg";
// // 			}
// // 			elem.src = imgSrc;
// 			elem.src = "/yqq/images/a0"+randomNum(1, 5)+".jpg";
// 		}
// 	}, true);
	
	</script>
	
	<script th:inline="javascript" type="text/javascript">
	    var ctxPath  = [[@{/}]];
	    console.log("ctxPath："+ctxPath);
	</script>
	
	<style type="text/css">
	.goog-te-gadget-simple {
	    background-color: transparent !important;
	    border-left: 0px !important;
	    border-top: 0px !important;
	    border-bottom: 0px !important;
	    border-right: 0px !important;
	    font-size: 10pt !important;
	    display: inline-block !important;
	    padding-top: 0px !important;
	    padding-bottom: 0px !important;
	    cursor: pointer !important;
	    zoom: 1 !important;
	    *display: inline !important;
	    width: 40px;
	    height: 40px;
	}
	</style>

</head>

<div th:fragment="top">

<header id="header">
  <div class="navbox">
    <h2 id="mnavh"><span class="navicon"></span></h2>
    <div class="logo"><a th:href="@{/}" th:text="${siteInfo.site_title}">张念祥个人博客</a></div>
    <nav>
      <ul id="starlist">
      
      	<li th:each="menu:${menus}" th:class="${menu.type=='DEFAULT_MENU'?'':'menu'}">
      		<a th:if="${menu.type=='DEFAULT_MENU'}" th:href="@{${menu.url}}" th:text="${menu.name}">首页</a>
      		<a th:if="${menu.type!='DEFAULT_MENU'}" href="javascript:return false;" th:text="${menu.name}">文章分类</a>
      		
      		<ul class="sub" th:if="${menu.type=='CATEGORY_MENU'}">
	            <li th:each="category:${categories}"><a th:href="@{'/list?categoryId='+${category.mid}}" th:text="${category.name}+'('+${category.count}+')'"></a></li>
	          </ul>
      		<ul class="sub" th:if="${menu.type=='OPTION_MENU'}">
	          	<li th:if="${session.login_user!=null}"><a th:href="@{/admin/index}">后台</a></li>
	            <li th:if="${session.login_user!=null}"><a href="#" onclick="logout()">注销</a></li>
	            <li th:if="${session.login_user==null}"><a th:href="@{/login}">登录</a></li>
	          </ul>
      	</li>
      </ul>
    </nav>
    <div class="searchico"></div>
  </div>
</header>
<div class="searchbox">
	<form th:action="@{/search}" id="searchForm" method="post">
		<input type="hidden" name="keyword" id="keywordInput"/>
		<input type="hidden" name="type" id="typeInput"/>
		<input type="hidden" name="categories" id="categoriesInput"/>
		<input type="hidden" name="tags" id="tagsInput"/>
	</form>
  <div class="search">
      	<div style="display: flex;">
      		<input name="keyboard" id="keyboard" class="input_text" placeholder="请输入关键字词" style="color: rgb(153, 153, 153);" type="text"/>
			<input id="searchButton2" name="Submit" class="input_submit" value="精确搜索" type="button" style="border: 0; background-color: #F06B00" title="搜索关键字完整出现的文章"/>
			<input id="searchButton" name="Submit" class="input_submit" value="模糊搜索" type="button" style="border: 0; background-color: #fb9039" title="会对关键字进行分词搜索，效果类似于百度"/>
   		</div>
    
    <div style="display: flex; background-color: white; padding-top: 3px;border-top: 1px solid #aaa;">
    	<label style="width: 100px;margin-top: 3px;padding: 0;border-right: 1px solid #aaa;">&nbsp;&nbsp;范围：</label>
   			<select name="categories" id="categories" class="input_text" multiple="multiple">
      			<option th:each="category:${categories}" th:value="${category.name}" th:text="${category.name}"></option>
      		</select>
      		<select name="tags" id="tags" class="input_text" multiple="multiple">
      			<option th:each="tag:${tags}" th:value="${tag.name}" th:text="${tag.name}"></option>
      		</select>
   		
	</div>
  </div>
  <div class="searchclose"></div>
</div>

<script th:inline="javascript">

function logout(){
	var to = window.location.pathname+window.location.search;
	window.location.href=ctxPath+"admin/logout?to="+to;
}

$("#categories").select2({
// 	theme: "classic",// 旧版样式
	tags: true,
	placeholder: '文章分类',
	multiple: true,
	allowClear: true,
	minimumResultsForSearch: Infinity
});
$("#tags").select2({
// 	theme: "classic",// 旧版样式
	tags: true,
	placeholder: '文章标签',
	multiple: true,
	allowClear: true,
	minimumResultsForSearch: Infinity
});

function getParams(){
	var r = {};
	var keyword = $.trim($("#keyboard").val());
	if(keyword==null || keyword==""){
		alert("你输入的关键字不合法！");
		return null;
	}else{
		r.keyword = keyword;
		var categories = $.trim($("#categories").val()); 
		var tags = $.trim($("#tags").val()); 
		if(categories!=null && categories!=""){
			r.categories = categories;
		}
		
		if(tags!=null && tags!=""){
			r.tags = tags;
		}
		return r;
	}
}


$("#searchButton").click(function(){
	var param = getParams();
	if(param!=null){
		param.type="模糊";
		
		$("#keywordInput").val(param.keyword);
		$("#typeInput").val(param.type);
		if(param.categories!=null){$("#categoriesInput").val(param.categories);}
		if(param.tags!=null){$("#tagsInput").val(param.tags);}
		$("#searchForm").submit();
	}

}); 

$("#searchButton2").click(function(){
	var param = getParams();
	if(param!=null){
		param.type="精确";
		
		$("#keywordInput").val(param.keyword);
		$("#typeInput").val(param.type);
		if(param.categories!=null){$("#categoriesInput").val(param.categories);}
		if(param.tags!=null){$("#tagsInput").val(param.tags);}
		$("#searchForm").submit();
	}
}); 

$("#keyboard").keypress(function (e) {
    if (e.which == 13) {
    	$('#searchButton2').trigger('click');
    }
});

</script>
</div>

<footer th:fragment="footer">
  <div class="box" style="text-align: center;">
<!--     <div class="wxbox"> -->
<!--       <ul> -->
<!--         <li><img src="images/wxgzh.jpg"><span>微信公众号</span></li> -->
<!--         <li><img src="images/wx.png"><span>我的微信</span></li> -->
<!--       </ul> -->
<!--     </div> -->
    <div class="endnav" style="text-align: left;">
      <p><b>站点声明：</b></p>
      <p th:utext="${options==null?(webInfo==null?'':webInfo.options.site_statement):options.site_statement}"></p>
    </div>
  </div>
  <a href="#">
  	<div class="top"></div>
  </a> 
	<div class="trans" id="trans"></div>
</footer>

<div th:fragment="trans">
	<!--把button放在右下角，这个是可以随意修改的，你可以改成一个链接一个图片之类的-->
	<script type="text/javascript" th:inline="javascript">
		var u = [[@{/}]];
		//资源请求路径
		var resourcesUrl = u+"yqq/trans";
		//这里设置翻译面板的语言，这里只切换中(zh-CN)英文(en)，详情请看代码
		var allLanguage = 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,tr'.split(',');
		var localLanguage;
		if (navigator.language) {
			localLanguage = navigator.language;
		}
		else {
			localLanguage = navigator.browserLanguage;
		}
		//检查是否支持此语言翻译
		if($.inArray(localLanguage,allLanguage)==-1){
			localLanguage = "zh-CN";
		}
		console.log("当前语言环境"+localLanguage);
		
		function googleTranslateElementInit() {
		 
			new google.translate.TranslateElement(
				{
					//这参数没用，请忽略
					//pageLanguage: 'zh-CN',
					//一共80种语言选择，这个是你需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
					//includedLanguages: 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,tr',
					//选择语言的样式，这个是面板，还有下拉框的样式，具体的记不到了，找不到api~~
					layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
					//自动显示翻译横幅，就是翻译后顶部出现的那个，有点丑，这个属性没有用的话，请看文章底部的其他方法
					autoDisplay: true, 
					//还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
				}, 
				'trans'//触发按钮的id
			);
			
			//自定义按钮样式，通过dom操作实现，因为没有api
			$(".goog-te-gadget-icon").remove();
			$(".goog-te-menu-value").remove();
			
		}
	</script>
	<script th:src="@{/yqq/trans/js/element.js?cb=googleTranslateElementInit}"></script>
</div>